<template>
  <div class="list-item" @click="look(data)">
    <div class="right-item">
      <img width="100%" :src="data.goods_img" alt="" />
    </div>
    <div class="left-item" v-if="!isdetails">
      <div class="line">
        <div class="line-title">商品名称</div>
        {{ data.name }}
      </div>
      <div class="line">
        <div class="line-title">商家姓名</div>
        {{ data.userlist ? data.userlist[0].name : "" }}
      </div>
      <div class="line">
        <div class="line-title">联系电话</div>
        {{ data.userlist ? data.userlist[0].phone : "" }}
        <img class="line-img" src="../assets/images/2电话@2x.png" alt="" />
      </div>
      <div class="line">
        <div class="line-title">上架时间</div>
        {{ data.release_time }}
      </div>
    </div>
    <div class="left-item" v-else>
      <div class="line">
        <div class="line-title">商品名称</div>
        {{ data.name }}
      </div>
      <div class="line">
        <div class="line-title">商家类型</div>
        {{ data.categorylist ? data.categorylist[0].category_name : "" }}
      </div>
      <div class="line">
        <div class="line-title">破损程度</div>
        {{
          data.fineness === 1
            ? "基本报废"
            : data.fineness === 2
            ? "使用功能受损"
            : data.fineness === 3
            ? "破损严重"
            : data.fineness === 4
            ? "有破损"
            : data.fineness === 5
            ? "轻微破损"
            : data.fineness === 6
            ? "有明显擦痕"
            : data.fineness === 7
            ? "有轻微擦痕"
            : data.fineness === 8
            ? "有使用痕迹"
            : data.fineness === 9
            ? "基本全新"
            : data.fineness === 10
            ? "全新"
            : ""
        }}
      </div>
      <div class="line">
        <div class="line-title">商品状态</div>
        {{
          data.state === 1
            ? "已出租"
            : data.state === 2
            ? "未出租"
            : data.state === 3
            ? "未发布"
            : "已下架"
        }}
      </div>
      <div class="line">
        <div class="line-title">商品价格</div>
        {{ data.price }}元
      </div>
      <div class="line">
        <div class="line-title">商家姓名</div>
        {{ data.userlist ? data.userlist[0].name : "" }}
      </div>
      <div class="line">
        <div class="line-title">联系电话</div>
        {{ data.userlist ? data.userlist[0].phone : "" }}
        <img class="line-img" src="../assets/images/2电话@2x.png" alt="" />
      </div>
      <div class="line">
        <div class="line-title">上架时间</div>
        {{ data.release_time }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    isdetails: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {
    look(obj) {
      if (this.isdetails) {
        return;
      }
      this.$router.push({ path: "/goods", query: { id: obj.id } });
    }
  }
};
</script>

<style lang="scss" scoped>
.list-item {
  width: 100%;
  min-height: 300px;
  background: #ffffff;
  display: flex;
  padding: 27px 33px;
  justify-content: space-between;
  align-content: center;
  margin-top: 16px;

  &:nth-last-child(1) {
    margin-bottom: 20px;
  }
  .left-item {
    flex: 1;
    .title {
      font-weight: 500;
      font-size: 26px;
      color: #262a3c;
      line-height: 36px;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      .title-img {
        width: 21px;
        height: 26px;
        margin-right: 15px;
      }
    }
    .line {
      font-weight: 400;
      font-size: 24px;
      color: #262a3c;
      line-height: 36px;
      display: flex;
      align-items: center;
      margin-top: 15px;
      .line-title {
        font-weight: 300;
        color: #838899;
        display: inline-block;
        margin-right: 15px;
      }

      .line-img {
        width: 36px;
        height: 36px;
        margin-left: 15px;
      }
    }
  }
  .right-item {
    width: 180px;
    position: relative;
    margin-top: 20px;
    margin-right: 30px;
  }
}
</style>
